<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1.验证用户名是否存在：select</title>
</head>

<body>
    <h1>1.验证用户名是否存在：select</h1>
    用户名：<input type="text" autocomplete="off" name="" id="name"><span id="inf"></span><br>
    密码：<input type="password" id="psw"><br>
    <input type="button" value="注册" id="regbtn">

</body>
<script src="myquery.js"></script>
<script>
    (function () {
        /*
            1.登陆:select 成功登陆-存入cookie
        */
        let name = document.querySelector('#name');
        let inf = document.querySelector('#inf');
        let regbtn = document.querySelector('#regbtn');
        let psw = document.querySelector('#psw');
        let isok = false;

        //1.验证用户名是否存在：select
        name.onblur = () => {
            let val = name.value.trim();
            if (val) {//想要后端帮忙查询用户名是否存在
                ajax({
                    type: 'get',
                    url: 'api/checkname.php',
                    data: {
                        name: val
                    },
                    success: str => {
                        // console.log(str);
                        if (str == 'no') {
                            //不可以注册
                            inf.innerHTML = '该用户太受欢迎啦，请换一个';
                            inf.style.color = 'red';
                            isok = false;
                        } else {
                            //可以注册
                            inf.innerHTML = '验证通过';
                            inf.style.color = '#58bc58';
                            isok = true;
                        }
                    }
                });
            } else {
                inf.innerHTML = '请输入用户名';
                inf.style.color = 'red';
            }
        }

        //2.注册
        regbtn.onclick = () => {
            if (isok) {//验证通过才能注册
                console.log(isok);
                let username = name.value.trim();
                let password = psw.value.trim();
                if (username && password) {//注册
                    ajax({
                        type: 'post',
                        url: 'api/reg.php',
                        data: {
                            username: username,
                            password: password
                        },
                        success: str => {
                            // console.log(str);
                            let html = '';
                            if (str == 'no') {
                                //失败
                                // html = '注册失败';
                                alert('注册失败');
                            } else {
                                //注册成功
                                // html = '注册成功';
                                alert('注册成功');
                                location.href = '04login.html?' + username;
                            }
                            // alert(html);
                        }
                    });
                } else {
                    inf.innerHTML = '请输入用户名和密码';
                    inf.style.color = 'red';
                }
            }

        }
    })();
</script>

</html>